<template>
    <div>
        <header class="base-header">
            <i class="link-icon" @tap="goback"></i>
            <h1>订单详情</h1>
        </header>
        <div class="order-type" v-if="data.orderDetail">
            <h3>订单{{getStatusStr(data.orderDetail.orderStatus)}}</h3>
            <p v-if="data.orderDetail.orderStatus===0">已下单{{formatTime2(data.orderDetail.createTime)}}</p>
            <p v-if="data.orderDetail.orderStatus===1">已发货{{formatTime2(data.orderDetail.shipTime)}}</p>
            <p v-if="data.orderDetail.orderStatus===2">收货完成时间：{{formatTime1(data.orderDetail.completeTime)}}</p>
            <p v-if="data.orderDetail.orderStatus===3">取消时间：{{formatTime1(data.orderDetail.cancelTime)}}</p>
            <!--type1: 待发货；  2：已发货  3：已完成  4：已取消-->
            <span class="type-img" :class="{'type-1': data.orderDetail.orderStatus===0, 'type-2': data.orderDetail.orderStatus===1, 'type-3': data.orderDetail.orderStatus===2, 'type-4': data.orderDetail.orderStatus===3}" ></span>
        </div>
        <div class="address">
          <i class="ali-iconfont address-icon" style="font-size: 25px;padding-right:5px;padding-left:5px;">&#xe617;</i>
          <div class="address-info">
            <div class="user-phone">
              <span>收货人：{{data.orderDetail.receiverName}}</span>
              <span>{{data.orderDetail.receiverPhone}}</span>
            </div>
            <div class="location">
              收货地址：{{data.orderDetail.addr}}
            </div>
          </div>
        </div>
        <div class="order-line">
            <div class="item">
                <div class="store-line">
                    <i></i>
                    <h2>{{data.orderDetail.merchant.userName}}</h2>
                </div>
                <div class="goods" v-for="item in data.orderDetail.items" @tap="lookGoods(item.goodsId)">
                    <div class="details">
                        <img class="goods-line-img" :src="item.imageUrl">
                        <div class="title settlement-title">
                            <h3>{{item.name}}</h3>
                            <div class="integral">
                                {{item.point}}积分
                            </div>
                            <span>&#215; {{item.num}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-time" id="content" style="position:relative;">
                <p v-if="(data.orderDetail.orderStatus===1 || data.orderDetail.orderStatus===2) && data.orderDetail.logiName && data.orderDetail.logiNum">{{data.orderDetail.logiName}}：<span id="biao1">{{data.orderDetail.logiNum}}</span></p>
                <p>订单编号：{{data.orderDetail.orderNum}}</p>
                <p>创建时间：{{formatTime1(data.orderDetail.createTime)}}</p>
                <p>兑换时间：{{formatTime1(data.orderDetail.createTime)}} </p>
                <p v-if="data.orderDetail.orderStatus===1 || data.orderDetail.orderStatus===2">发货时间：{{formatTime1(data.orderDetail.shipTime)}} </p>
                <p v-if="data.orderDetail.orderStatus===2">收货时间：{{formatTime1(data.orderDetail.completeTime)}} </p>
                <p v-if="data.orderDetail.orderStatus===3">取消时间：{{formatTime1(data.orderDetail.cancelTime)}}</p>
                <span v-if="data.orderDetail.logiName && data.orderDetail.loginNum" class="copy-btn" @tap="copyMsg">复制信息</span>
            </div>
        </div>
    </div>
</template>
<script>
  import store from '../we-store';
  export default {
    data: function () {
      return {
        data: store.state
      };
    },
    methods: {
      goToGoodsDetail: function (id) {
        location.href = '../../mallHome/index.html#!/goods/' + id;
      },
      lookGoods: function (id) {
        store.lookGoodsDetail(id);
      },
      goback: function () {
        window.history.go(-1);
      },
      copyMsg: function () {
        var msg = document.getElementById('biao1').innerText;
        var oInput = document.createElement('input');
        oInput.value = msg;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand('Copy'); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
        alert('复制成功');
      },
      getStatusStr: function (status) {
        var str = '';
        switch (status) {
          case 0:
            str = '待发货';
            break;
          case 1:
            str = '已发货';
            break;
          case 2:
            str = '已完成';
            break;
          case 3:
            str = '已取消';
            break;
        }
        return str;
      },
      formatTime1: function (time) {
        var formatime = new Date(time);
        var year = formatime.getFullYear();
        var month = formatime.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var day = formatime.getDate();
        day = day < 10 ? '0' + day : day;
        var hour = formatime.getHours();
        hour = hour < 10 ? '0' + hour : hour;
        var minutes = formatime.getMinutes();
        minutes = minutes < 10 ? '0' + minutes : minutes;
        var seconds = formatime.getSeconds();
        seconds = seconds < 10 ? '0' + seconds : seconds;
        formatime = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
        return formatime;
      },
      formatTime2: function (time) {
        var now = new Date().getTime();
        var ago = new Date(time).getTime();
        var gapTime = now - ago;
        var day = Math.floor(gapTime / (1 * 24 * 3600 * 1000));
        var hour = Math.floor((gapTime - day * (1 * 24 * 3600 * 1000)) / (3600 * 1000));
        var minutes = Math.floor((gapTime - day * (1 * 24 * 3600 * 1000) - hour * (3600 * 1000)) / (60 * 1000));
        return day + '天' + hour + '小时' + minutes + '分';
      }
    },
    watch: {
      '$route' (to, from) {
        if (to.params.id) {
          store.getOrderDetail(to.params.id);
        }
      }
    },
    created: function () {
      store.getOrderDetail(this.$route.params.id);
    }
  };
</script>
